<template>
  <Dialog title="OCR识别" class="ocr" v-model="dialogVisible" width="55%">
    <el-upload
      class="upload-demo"
      drag
      :action="upload_url"
      :headers="uploadHeaders"
      :before-upload="beforeUpload"
      :on-success="uploadSuccess"
    >
      <el-icon class="el-icon--upload">
        <upload-filled/>
      </el-icon>
      <div class="el-upload__text">
        拖拽PDF到这里 <em>选择PDF</em>
      </div>
      <!--      <template #tip>-->
      <!--        <div class="el-upload__tip">-->
      <!--          jpg/png files with a size less than 500kb-->
      <!--        </div>-->
      <!--      </template>-->
    </el-upload>
  </Dialog>
</template>

<script setup lang="ts">
import {UploadFilled} from '@element-plus/icons-vue'
import {getAccessToken, getTenantId} from "@/utils/auth"
import {ElLoading} from 'element-plus'

const emit = defineEmits(['success'])
const dialogVisible = ref(false)
const upload_url = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/tools/ocr'
const uploadHeaders = {
  Authorization: 'Bearer ' + getAccessToken(),
  'tenant-id': getTenantId()
} // 上传 Header 头
const open = () => {
  dialogVisible.value = true
}
const servicesLoading = (node:any,str:any,lock:any) => {

  return ElLoading.service({

    target: document.querySelector(node),//loading需要覆盖的DOM节点，默认为body

    text: str,//加载文案

    lock,//同v-loading的修饰符

    background: 'rgba(0, 0, 0, 0.7)',//背景色

    // spinner: 'el-icon-loading',//加载图标

  })

}
const loading = ref()
const beforeUpload = () => {
  loading.value = servicesLoading('.ocr', 'OCR识别中', true)
}
const uploadSuccess = (response: any) => {
  console.log(response)
  dialogVisible.value = false
  loading.value.close()
  if(response){
    if(response.code == 0){
      window.open(response.data)
    }
  }
}
defineExpose({open}) // 提供 open 方法，用于打开弹窗
</script>

<style scoped>

</style>
